<template>
    <div class="home">
        <div class="common_bg">
            <div class="menu_div">
                <div>
                    <div @click="jumpPage(0)" class="menu_btn">首页</div>
                    <div @click="jumpPage(1, 1)" class="menu_btn" :class="{menu_active: default_active == 1}">我要选品</div>
                    <div @click="jumpPage(2, 1)" class="menu_btn" :class="{menu_active: default_active == 2}">我要制造</div>
                    <div @click="jumpPage(3, 1)" class="menu_btn" :class="{menu_active: default_active == 3}">我要服务</div>
                    <div @click="jumpPage(4, 1)" class="menu_info" :class="{submenu_active: default_active == 4}">我的订单</div>
                    <div class="cut_line"></div>
                    <div v-if="default_active == 1" @click="jumpPage(1, 3)" class="menu_info" :class="{submenu_active: submenu_active == 3}">新品推荐</div>
                    <div v-if="default_active == 1" @click="jumpPage(1, 2)" class="menu_info" :class="{submenu_active: submenu_active == 2}">AI选品</div>
                    <div v-if="default_active == 1" @click="jumpPage(1, 1)" class="menu_info" :class="{submenu_active: submenu_active == 1}">网上商城</div>

                    <div v-if="default_active == 2" @click="jumpPage(2, 4)" class="menu_info" :class="{submenu_active: submenu_active == 4}">我要ODM</div>
                    <div v-if="default_active == 2" @click="jumpPage(2, 3)" class="menu_info" :class="{submenu_active: submenu_active == 3}">我要代工</div>
                    <div v-if="default_active == 2" @click="jumpPage(2, 2)" class="menu_info" :class="{submenu_active: submenu_active == 2}">辅助设计</div>
                    <div v-if="default_active == 2" @click="jumpPage(2, 1)" class="menu_info" :class="{submenu_active: submenu_active == 1}">超级工厂</div>

                    <div v-if="default_active == 3" @click="jumpPage(3, 4)" class="menu_info" :class="{submenu_active: submenu_active == 4}">跨境回款</div>
                    <div v-if="default_active == 3" @click="jumpPage(3, 3)" class="menu_info" :class="{submenu_active: submenu_active == 3}">一键代发</div>
                    <div v-if="default_active == 3" @click="jumpPage(3, 2)" class="menu_info" :class="{submenu_active: submenu_active == 2}">报关退税</div>
                    <div v-if="default_active == 3" @click="jumpPage(3, 1)" class="menu_info" :class="{submenu_active: submenu_active == 1}">知识产权</div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div>
                <div>
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            default_active: 1,
            submenu_active: 1
        }
    },
    mounted() {
        // this.$i18n.locale = "zh-CN"
        let get_default_active = localStorage.getItem("default_active") || ""
        if(get_default_active) {
            this.default_active = get_default_active
        }
        console.log("this.$route.path", this.$route.path)
        if(this.$route.path == "/home/superFactory") {
            this.default_active = 2
            this.submenu_active = 1
        } else if (this.$route.path == "/home/propertyRight") {
            this.default_active = 3
            this.submenu_active = 1
        } else {
            this.default_active = 1
            this.submenu_active = 1
        }
    },
    methods: {
        jumpPage(index, page) {
            if(index === 0) {
                this.$router.push("/")
            } else if(index === 1 && page === 1) {
                this.$router.push("/home/shoppingMall")
                this.default_active = 1
                this.submenu_active = 1
            } else if(index === 1 && page === 2) {
                this.$router.push("/home/aiSelection")
                this.default_active = 1
                this.submenu_active = 2
            } else if(index === 1 && page === 3) {
                this.$router.push("/home/newProduct")
                this.default_active = 1
                this.submenu_active = 3
            } else if(index === 2 && page === 1) {
                this.$router.push("/home/superFactory")
                this.default_active = 2
                this.submenu_active = 1
            } else if(index === 2 && page === 2) {
                this.$router.push("/home/aidedDesign")
                this.default_active = 2
                this.submenu_active = 2
            } else if(index === 2 && page === 3) {
                this.$router.push("/home/doOEM")
                this.default_active = 2
                this.submenu_active = 3
            } else if(index === 2 && page === 4) {
                this.$router.push("/home/doOEDM")
                this.default_active = 2
                this.submenu_active = 4
            } else if(index === 3 && page === 1) {
                this.$router.push("/home/propertyRight")
                this.default_active = 3
                this.submenu_active = 1
            } else if(index === 3 && page === 2) {
                this.$router.push("/home/taxRefund")
                this.default_active = 3
                this.submenu_active = 2
            } else if(index === 3 && page === 3) {
                this.$router.push("/home/proxyShipping")
                this.default_active = 3
                this.submenu_active = 3
            } else if(index === 3 && page === 4) {
                this.$router.push("/home/paymentCollection")
                this.default_active = 3
                this.submenu_active = 4
            } else if(index === 4 && page === 1) {
                this.$router.push("/home/myOrder")
                this.default_active = 4
                this.submenu_active = 1
            } else {
                window.location.reload()
            }
        },
    }
}
</script>
<style scoped>
.menu_div {
    color: var(--color-font);
}
.menu_btn {
    margin: 0 10px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    float: left;
}
.menu_active {
    font-weight: bold;
    color: var(--color-base);
    font-size: var(--fontsize-20);
}
.submenu_active {
    font-weight: bold;
    color: var(--color-base);
    font-size: var(--fontsize-14);
}
.menu_info {
    margin: 0 10px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    float: right;
}
.cut_line {
    height: 50px;
    width: 3px;
    margin-top: 5px;
    background-color: var(--color-base);
    float: right;
}
</style>